<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/web/head.jsp"%>
</head>
<body>
	<div align="center">
		<form class="layui-form" style="margin: 20px;">
			<div class="layui-inline">
				<label class="layui-form-label">类型</label>
				<div class="layui-input-inline" style="width: 200px;">
					<select name="typename" lay-verify="" lay-search>
					</select>
				</div>
			</div>

			<div class="layui-inline" style="margin-left: 15px;">
				<input type="button" class="layui-btn layui-btn" lay-submit
					lay-filter="search" value="搜索" />
			</div>

			<input type="hidden" name="pageIndex" value="1"><input
				type="hidden" name="pageLimit" value="8"> <input
				type="hidden" name="action" value="get">
		</form>
	</div>
	<!-- 	table -->
	<div style="margin-top: 0px;">
		<table class="layui-table">
			<thead>
				<tr>
					<th>序号</th>
					<th>类型</th>
					<th>稿费/字</th>
					<th>审稿费</th>
					<th>版面费</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
		<div id="test1" style="text-align: center; padding-right: 30px;"></div>
	</div>

	<script type="text/javascript">
		ajax('/ArticleTypeServlet', 'json', {
			action : 'getAll'
		}, function(res) {
			var html = '<option value="">请选择类型</option>'
			$.each(res, function(i, dom) {
				html += '<option value="'+dom.name+'">' + dom.name
						+ '</option>'
			})
			$('select').html(html)
			form.render('select')
		})
		
		function refresh(){
			$('input[value="搜索"]').click();
		}
		
		formOnSubmit('search', 'json', '/TypePayServlet', function(data) {
			console.log(data)
			var curr = $('input[name="pageIndex"]').val()
			var limit = $('input[name="pageLimit"]').val()
			// 渲染
			laypage
					.render({
						elem : 'test1',
						count : data.count,
						layout : [ 'count', 'prev', 'page', 'next', 'refresh',
								'skip' ],
						curr : curr,
						limit : limit,
						jump : function(obj, first) {
							$('input[name="pageIndex"]').val(obj.curr)
							$('input[name="pageLimit"]').val(obj.limit)
							if (!first) {
								refresh();
							}
						}
					})
			var html = "";
			var tpl = $('#tradd').html();
			$.each(data.list, function(i, dom) {
				var d = {
					id : i + 1 + (curr - 1) * limit,
					name : dom.typeId,
					articlePay : dom.articlePay==null?"":dom.articlePay,
					checkPay : dom.checkPay==null?"":dom.checkPay,
					pagePay : dom.pagePay==null?"":dom.pagePay
				}
				html += laytpl(tpl).render(d)
				$('tbody').html(html)
			});
		})
		
		refresh()
		
		function updata(typeId){
			layerOpen(typeId+' 报社-设置费用', '/web/manager/caseUpdata.jsp?typeId='+typeId, '400px', '300px',
					refresh)
		}
		
	</script>

	<script type="text/html" id="tradd">
		<tr>
			<td>{{d.id}}</td>
			<td>{{d.name}}</td>
			<td>{{d.articlePay}}</td>
			<td>{{d.checkPay}}</td>
			<td>{{d.pagePay}}</td>
			<td>
				<a href="javascript:updata('{{d.name}}');" class="layui-btn layui-btn-sm">设置金额</a>
			</td>
		</tr>
	</script>
</body>
</html>